<template>
	<view class="container">
		<view class="order-detail">
			<view class="order-code">
				<text>核销码：MC–1234–5678–9012</text>
			</view>
			<view class="order-car">
				<text>车辆：奔驰FWE4/豫A98FHJ</text>
			</view>

			<view class="service-content">
				<text>服务内容</text>
				<view class="service-item" v-for="(item, index) in services" :key="index">
					<text>{{ item.name }}</text>
					<text>￥{{ item.price }}</text>
				</view>
			</view>

			<view class="order-info">
				<text class="section-title">订单信息</text>
				<view class="info-row">
					<text>原价</text>
					<text>￥100</text>
				</view>
				<view class="info-row discount">
					<text>优惠</text>
					<text>–￥10</text>
				</view>
				<view class="info-row total">
					<text>实付金额</text>
					<text>￥25.00</text>
				</view>
				<view class="info-row">
					<text>订单编号</text>
					<text>1232233445</text>
				</view>
				<view class="info-row">
					<text>预约时间</text>
					<text>2020–02–18 19:24:28</text>
				</view>
				<view class="info-row">
					<text>支付时间</text>
					<text>2020–02–18 19:24:28</text>
				</view>
				<view class="info-row">
					<text>核销时间</text>
					<text>2020–02–18 19:24:28</text>
				</view>
			</view>
		</view>
		<button class="confirm-button" @click="onConfirm">确认核销</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				services: [{
						name: "车辆清洗",
						price: 100
					},
					{
						name: "车辆附加费用",
						price: 100
					}
				],
			};
		},
		methods: {
			onConfirm() {
				uni.showModal({
					title: '核销此订单',
					content: '请您仔细核对订单，此操作不可撤销，请谨慎操作',
					success: (res) => {
						if (res.confirm) {
							// 处理确认核销的操作
							console.log('用户点击核销');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onLoad(options) {
			if (options.orderInfo) {
				const order = JSON.parse(decodeURIComponent(options.orderInfo)); // 将 JSON 字符串解析回对象
				console.log(order); // 这里可以获取到传递过来的 order 对象
				// 你可以在这里处理 order 对象
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.order-detail {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.order-code,
	.order-car {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.service-content {
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx solid #e0e0e0;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;
		color: #333;
		font-size: 28rpx;
	}

	.order-info {
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin: 5rpx 0;
		color: #333;
		font-size: 28rpx;
	}

	.discount {
		color: #ff5722;
	}

	.total {
		font-weight: bold;
		color: #ff5722;
	}

	.confirm-button {
		width: 100%;
		background-color: #007aff;
		color: white;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		text-align: center;
		cursor: pointer;
	}
</style>